<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
    <h1 th:if=" ${ProjectCostModel.kind} == 0">
        预算数据—原材料计划明细
    </h1>
    <h1 th:if=" ${ProjectCostModel.kind} == 1">
        核算数据—原材料计划明细
    </h1>
</section>
<!--导入外购件模态框-->
<div class="modal fade" id="modal-import">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Excel信息导入</h4>
            </div>
            <div class="modal-body">
                <form id="importForm">
                    <input  name="inputKind" type="hidden" th:value="${ProjectCostModel.kind}">
                    <input  name="inputDesignType" type="hidden" th:value="${ProjectCostModel.designType}">
                    <input  name="inputMacId" type="hidden" th:value="${ProjectCostModel.inputId}">
                    <input  name="inputPartName" type="hidden" th:value="${ProjectCostModel.partName}">
                    <input name="inputCostKind" type="hidden" th:value="${ProjectCostModel.costKind}">
                    <input name="kbId" type="hidden" th:value="${ProjectCostModel.fkId}">
                    <input name="inputCode" type="hidden" th:value="${ProjectCostModel.code}">
                    <div class="form-group">
                        <label>原材料数据模版</label>
                        <a th:href="@{/file/原材料计划数据.xlsx}">点击下载</a>
                    </div>
                    <div class="form-group">
                        <label>上次导入错误数据</label>
                        <a id="download-error"
                           th:data-url="@{/files/{user}/error.xlsx(user=${session.user.account})}"
                           href="javascript:void(0);">点击下载</a>
                    </div>
                    <div class="form-group">
                        <label>选择Excel文件并上传</label>
                        <input class="btn" type="file" multiple="multiple" name="file">
                        <p class="help-block">请按模板格式进行导入，信息与模板信息对应。</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-upload" type="button" class="btn btn-success">
                    <span class="Bold">上传</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="col-xs-12" style="padding:0px 10px 0px 10px">
                    <div class="box-header">
                        <form id="queryForm" onsubmit="return false;">
                            <input  name="inputKind" type="hidden" th:value="${ProjectCostModel.kind}">
                            <input  name="inputDesignType" type="hidden" th:value="${ProjectCostModel.designType}">
                            <input  name="inputMacId" type="hidden" th:value="${ProjectCostModel.inputId}">
                            <input  name="inputPartName" type="hidden" th:value="${ProjectCostModel.partName}">
                            <input name="inputCostKind" type="hidden" th:value="${ProjectCostModel.costKind}">
                            <input name="kbId" type="hidden" th:value="${ProjectCostModel.fkId}">
                            <input name="inputCode" type="hidden" th:value="${ProjectCostModel.code}">
                            <div class="row">
                                <div class="form-inline">
                                    <div class="form-group" style="margin-right: 10px;">
                                        <label>项目编号：</label>
                                        <span class="form-control"
                                              style="border:none;border-bottom: solid 1px #eee; width: 300px;text-align: center;"
                                              th:text="${ProjectCostModel.code}"></span>
                                    </div>
                                    <div class="form-group" style="margin-right: 10px;">
                                        <label>项目名称：</label>
                                        <span class="form-control"
                                              style="border:none;border-bottom: solid 1px #eee; width: 300px;text-align: center;"
                                              th:text="${ProjectCostModel.name}"></span>
                                    </div>
                                    <div class="form-group" style="margin-right: 10px;">
                                        <label>项目数量：</label>
                                        <span class="form-control"
                                              style="border:none;border-bottom: solid 1px #eee; width: 300px;text-align: center;"
                                              th:text="${ProjectCostModel.num}"></span>
                                    </div>
                                </div>
                                <div class="form-inline">
                                    <div class="form-group" style="margin-right: 10px;">
                                        <label>设备部分：</label>
                                        <span class="form-control"
                                              style="border:none;border-bottom: solid 1px #eee; width: 300px;text-align: center;"
                                              th:text="${ProjectCostModel.partName}"></span>
                                    </div>
                                    <div class="form-group" style="margin-right: 10px;">
                                        <label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;专业：</label>
                                        <span class="form-control"
                                              style="border:none;border-bottom: solid 1px #eee; width: 300px;text-align: center;"
                                              th:if="${ProjectCostModel.designType==1}">机械</span>
                                        <span class="form-control"
                                              style="border:none;border-bottom: solid 1px #eee; width: 300px;text-align: center;"
                                              th:if="${ProjectCostModel.designType==2}">自动化</span>
                                        <span class="form-control"
                                              style="border:none;border-bottom: solid 1px #eee; width: 300px;text-align: center;"
                                              th:if="${ProjectCostModel.designType==3}">流体</span>
                                    </div>
                                    <div class="form-group" style="margin-right: 10px;margin-top: 5px;">
                                        <label>设计类别：</label>
                                        <span class="form-control"
                                              style="border:none;border-bottom: solid 1px #eee; width: 300px; text-align: center;"
                                              th:text="${ProjectCostModel.projectClassifyName}"></span>
                                    </div>
                                    <input name="kind" type="hidden" th:value="${ProjectCostModel.kind}">
                                    <input name="designType" type="hidden" th:value="${ProjectCostModel.designType}">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="toolbar" class="row" style="padding-bottom:5px">
                        <a href="javascript:void(0);"
                           style="margin-right: 10px; width: 83px;"
                           class="btn btn-info"
                           onclick="openImportModal()">
                            <span class="Bold">导入</span>
                        </a>
                        <a href="javascript:void(0);"
                           class="btn btn-danger"
                           onclick="emptyRolledData()">
                            <span class="Bold">数据清空</span>
                        </a>
                    </div>
                </div>
                <div class="box-body">
                        <table id="bootstrap-table"
                               style="table-layout: fixed;word-break:break-all; word-wrap:break-word;"></table>
                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    /** 表格 */
    var table;

    /** 打开导入模态框 */
    function openImportModal() {
        js.modal.open("modal-import");
    }
    /**
     * 数据清空
     *
     * */
    function emptyRolledData() {
        js.modal.confirm("确定清空所有原材料计划数据吗？", function () {
            js.submit({
                data: new FormData($("#queryForm")[0]),
                url: ctx + 'dataEntry/rolledSteelPlan/delRolled',
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        js.table.refresh(table);
                    } else {
                        js.modal.warning(result.msg);
                    }
                    js.modal.closeLoading();
                }
            });
        });
    }
    $(function () {
        /** 初始化表格 */
        table = js.table.init({
            id: 'bootstrap-table',
            url: ctx + "dataEntry/rolledSteelPlan/list",
            toolbar: 'toolbar',
            showColumns: false,
            showExport: false,
            pagination: false,
            pageSize: 300,
            paginationVAlign: 'both',
            striped: false,
            columns: [
                {
                    title: '序号', field: 'id', width: '50px',
                    formatter: function (value, row, index, field) {
                        return index + 1;
                    }
                },
                {title: "物料描述", field: 'outMalDesc',width: '400'},
                {title: "材质", field: 'outTexture',width: '100'},
                {title: "数量", field: 'outNum',width: '100'},
                {title: "单位", field: 'outUnit',width: '100'},
                {title: "型号/标准号", field: 'outStandard'},
                {title: "备注", field: 'outRemark'},
                {title: "上传人员", field: 'inputUser'},
                {title: "上传日期", field: 'editDate'},
                {title: '接收状态', field: 'isReceive', width: '120',
                    formatter: function (value, row, index, field) {
                        if (value == 0) {
                            return '未接收';
                        } else if (value == 1) {
                            return '已接收';
                        }
                    }},
            ]
        });
        /** 表格搜索 */
        $("#btn-search").on('click', function () {
            js.table.search(table);
        });

        /** 导入表单验证规则 */
        js.validate.init("importForm", {
            fields: {
                file: {
                    validators: {
                        notEmpty: {message: '上传文件不能为空'},
                        file: {extension: 'xls,xlsx', message: '请选择excel文件'}
                    }
                }
            }
        });

        /** 导入模态框隐藏事件，重置表单，重置验证 */
        js.modal.hideEvent("modal-import", function () {
            js.validate.reset("importForm");
            $("#importForm [name='file']").val(null);
        });
        /**
         * 打开导入模态框重新赋值
         */
        $("#toolbar").on('click', function () {
            $("#importForm input[name='inputKind']").val($("#queryForm input[name='inputKind']").val());
            $("#importForm input[name='inputDesignType']").val($("#queryForm input[name='inputDesignType']").val());
            $("#importForm input[name='inputMacId']").val($("#queryForm input[name='inputMacId']").val());
            $("#importForm input[name='inputPartName']").val($("#queryForm input[name='inputPartName']").val());
            $("#importForm input[name='inputCostKind']").val($("#queryForm input[name='inputCostKind']").val());
            $("#importForm input[name='kbId']").val($("#queryForm input[name='kbId']").val());
            $("#importForm input[name='inputCode']").val($("#queryForm input[name='inputCode']").val());
            js.modal.open("modal-add1");
        });




        /** 导入外购、原料、外协 */
        $("#btn-upload").click(function () {
            var $this = $(this);
            $this.attr('disabled', true);
            js.validSubmit({
                formId: "importForm",
                url: ctx + "dataEntry/rolledSteelPlan/import",
                data: new FormData($("#importForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.alert(result.msg);
                        if (result.msg == '导入完成') {
                            js.modal.hide("modal-import");
                        }
                        js.table.refresh(table);
                        $this.attr('disabled', false);
                    }
                }
            });
        });
        /** 下载导入失败excel */
        $("#download-error").click(function () {
            var that = $(this);
            js.post({
                url: ctx + "dataEntry/rolledSteelPlan/exist",
                async: false,
                data: {
                    url: that.attr("data-url")
                },
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        that.attr("href", that.attr("data-url") + "?timeStamp=" + new Date().getTime());
                    } else {
                        js.modal.warning("没有需要处理的文件");
                    }
                }
            });
        });
    });
</script>
</body>
</html>